<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue-todolist</title>
    <link rel="stylesheet" href="/css/style.css">
</head>

<body>
    <section class="todoapp">
        <header class="header">
            <h1>TODOS</h1>
            <input  class="new-todo" 
                    autofocus autocomplete="off" 
                    placeholder="What needs to be done?" 
                    v-model="newTodo"
                    @keyup.enter="addTodo">
        </header>
        <main class="main" v-show="todos.length" v-cloak>
            <ul class="todo-list">
                <li v-for="todo in filteredTodos" 
                    class="todo" 
                    :key="todo.id" 
                    :class="{
                    completed: todo.completed,
                    editing: todo == editedTodo
                    }">
                    <div class="view">
                        <input  class="toggle" 
                                type="checkbox" 
                                v-model="todo.completed">
                        <label @dblclick="editTodo(todo)">
                            {{ todo.title }}
                        </label>
                            <button class="destroy" @click="removeTodo(todo)"></button>
                    </div>
                    <input  class="edit" 
                            type="text" 
                            v-model="todo.title"
                            @blur="doneEdit(todo)"
                            @keyup.enter="doneEdit(todo)" 
                            @keyup.esc="cancelEdit(todo)">
                </li>
            </ul>
        </main>
        <footer class="footer" >
            <span class="todo-count">
                <strong>{{ remaining }}</strong> {{ pluralize }} left
            </span>
            <ul class="filters">
                <li><a @click="showAll" :class="{ selected: visibility == 'all' }">All</a></li>
                <li><a @click="showActive" :class="{ selected: visibility == 'active' }">Active</a></li>
                <li><a @click="showCompleted" :class="{ selected: visibility == 'completed' }">Completed</a></li>
            </ul>
            <button class="clear-completed" @click="removeCompleted"v-show="todos.length > remaining">
                Clear completed
            </button>
        </footer>
    </section>

    <script src="/vue/vue.min.js"></script>
    <script src="/vue/add-todo.js"></script>

</body>

</html>